<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .gray{
            background:gray;
        }
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <!-- {{}} 只能写表达式不能写语句
        1>数据绑定指令  v-text v-html
        2>条件指令 
        
        v-if v-else-if v-else   条件成立，则创建节点，否则不创建
        
        v-show 不能用在template标签上  display：none block

    -->
    <div id="app">
        {{msg}}
        {{num > 90?'及格':'不及格'}}
        <div v-text="msg"></div>
        <div v-html="msg"></div>

        <!-- <template > -->
            <input type="text" placeholder="请输入用户名" v-show="status === 1">
            <input type="text" placeholder="请输入密码" v-show="status === 1">
        <!-- </template> -->
        

        <input type="text" placeholder="请输入手机号" v-show="status!=1">

        
        <button>登录</button>

        <!-- 循环指令: v-for  array  object number  string 
            v-for比v-if的优先级高
        -->
        <input type="text" placeholder="电影名" v-model="movieName">
        <input type="text" placeholder="请输入价格" v-model="price">
        {{movieName}}{{price}}
        <button @click="add">添加</button>

        <ul v-if="list.length">
            <li  v-bind:class="style" v-if="item.isUp" v-for="(item,index) in list">
                {{index+1}}.{{item.name}} === {{item.price}}
                <button v-on:click="del(item.id)">删除</button>
            </li>
        </ul>

        <!-- <ul>
            <li v-for="(item,key,index) in movie">{{index}}----{{key}}----{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in 10">{{index}}-----{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in msg">{{index}}-----{{item}}</li>
        </ul> -->

        <!-- 属性绑定指令：v-bind:class v-bind:src v-bind:style ...  v-bind可以省略 :class :src 
            :class : 对象  数组  data属性
        
        -->

        <img :src="imgUrl" alt="" :style="imgStyle">

        <a :href="url">去百度</a>

        <!-- 事件指令 v-on:事件名  @事件名 -->

        <button @click="change">change</button>
        {{movie.address}}

    </div>
    <script src="./vue.js"></script>
    <script>

        console.log(Vue);

        let vm = new Vue({
            el:'#app',  //挂载元素
            data:{
                movieName:'',
                price:'',
                msg:'<p>hello vue</p>',
                num:92,
                status:1,
                imgStyle:{width:'100px',height:'100px'},
                w:100,
                h:100,
                style:'gray',
                url:'http://baidu.com',
                imgUrl:'https://cn.vuejs.org/images/logo.png',
                movie:{
                    name:'流浪地球',
                    price:58,
                    isUp:false
                },
                list:[
                    {
                        name:'流浪地球',
                        price:58,
                        isUp:false,
                        id:0
                    },
                    {
                        name:"惊奇队长",
                        price:68,
                        isUp:true,
                        id:1
                    },
                    {
                        name:"比悲伤更悲伤的故事",
                        price:68,
                        isUp:true,
                        id:2
                    },
                    {
                        name:"惊奇队长1",
                        price:68,
                        isUp:true,
                        id:3
                    },
                    {
                        name:"比悲伤更悲伤的故事1",
                        price:68,
                        isUp:true,
                        id:4
                    }
                ]
            },
            methods: {
                del(id){
                    let ind = this.list.findIndex(item => item.id === id);
                    this.list.splice(ind,1);
                },
                add(){
                    // this.list.push()
                    this.list.push({name:this.movieName,price:this.price,isUp:true,id:this.list.length})
                },
                change(){
                    this.$set(this.movie,'address','上地')
                    // this.$set(this.movie,'address','xixi');
                    // this.movie.address = 'xixi';
                }
            },
        })

        console.log(vm.$data);
        console.log(vm.$el);
        console.log(vm.list);
        // vm.test='lili';
        // vm.movie.address = '华联';
        // vm.$set(target,属性名,属性值);

        // Vue.set(target,属性名,属性值);

        // vm.$set(vm.movie,'address','华联');
        // Vue.set(vm.movie,'address','address');

    </script>
</body>
</html>